<template>
    <div>
        <div class="tools">
            <!--<button @click="exportHandle(0)">导出png图片</button>-->
            <!-- <button @click="exportHandle(1)">导出pdf格式</button> -->
            <button @click="minder.execCommand('camera', minder.getRoot(), 600);">重新定位</button>
            <button @click="minder.execCommand('zoomIn')">放大</button>
            <button @click="minder.execCommand('zoomOut');">缩小</button>
            <select @change="minder.execCommand('template', rootData.template);" v-model="rootData.template">
                <option v-for="(item, index) in templateList" :key="index" :value="index">{{item}}</option>
            </select>
            <select @change="minder.execCommand('theme', rootData.theme);" v-model="rootData.theme">
                <option v-for="(item, index) in themeList" :key="index" :value="index">{{item}}</option>
            </select>

            <select @change="importData( dataName);" v-model="dataName">
                <option v-for="(item, index) in dataList" :key="index" :value="index">{{index}}</option>
            </select>
        </div>

        <div id="minder-editor"></div>
    </div>
</template>

<script>
    export default {
        name: 'mind-editor',
        props: {},
        data() {
            return {
                minder: null,
                navIndex: 0,
                templateList: {
                    'default': '思维导图',
                    'tianpan': '天盘图',
                    'structure': '组织结构图',
                    'filetree': '目录组织图',
                    'right': '逻辑结构图',
                    'fish-bone': '鱼骨头图'
                },
                dataName:"one",
                dataList:{
                    one:`{
    "root": {
    "data": {
    "text": "百度产品"
    },
    "children": [
    { "data": { "text": "新闻" } },
    { "data": { "text": "网页", "priority": 1 } },
    { "data": { "text": "贴吧", "priority": 2 } },
    { "data": { "text": "知道", "priority": 2 } },
    { "data": { "text": "音乐", "priority": 3 } },
    { "data": { "text": "图片", "priority": 4 } },
    { "data": { "text": "视频", "priority": 5 } },
    { "data": { "text": "地图", "priority": 6 } },
    { "data": { "text": "百科", "priority": 7 } },
    { "data": { "text": "更多", "hyperlink": "http://www.baidu.com/more" } }
    ]
    }
    }`
                    ,
                    two:`{
    "root": {
    "data": {
    "text": "百度产品"
    },
    "children": [
    { "data": { "text": "新闻" } },

    { "data": { "text": "更多", "hyperlink": "http://www.baidu.com/more" } }

    ]
    }
    }`
                },
                themeList: {
                    'classic': '脑图经典',
                    'classic-compact': '紧凑经典',
                    'snow': '温柔冷光',
                    'snow-compact': '紧凑冷光',
                    'fish': '鱼骨图',
                    'wire': '线框',
                    'fresh-red': '清新红',
                    'fresh-soil': '泥土黄',
                    'fresh-green': '文艺绿',
                    'fresh-blue': '天空蓝',
                    'fresh-purple': '浪漫紫',
                    'fresh-pink': '脑残粉',
                    'fresh-red-compat': '紧凑红',
                    'fresh-soil-compat': '紧凑黄',
                    'fresh-green-compat': '紧凑绿',
                    'fresh-blue-compat': '紧凑蓝',
                    'fresh-purple-compat': '紧凑紫',
                    'fresh-pink-compat': '紧凑粉',
                    'tianpan': '经典天盘',
                    'tianpan-compact': '紧凑天盘'
                },
                rootData: {
                    root: {},
                    template: 'default',
                    theme: 'snow'
                },
            };
        },
        mounted() {
            this.minder = new window.kityminder.Minder();
            // km.setup('#minder-view');
            this.minder .renderTo(document.querySelector('#minder-editor'));
            this.minder.importData('json', `{
    "root": {
    "data": {
    "text": "百度产品"
    },
    "children": [
    { "data": { "text": "新闻" } },
    { "data": { "text": "网页", "priority": 1 } },
    { "data": { "text": "贴吧", "priority": 2 } },
    { "data": { "text": "知道", "priority": 2 } },
    { "data": { "text": "音乐", "priority": 3 } },
    { "data": { "text": "图片", "priority": 4 } },
    { "data": { "text": "视频", "priority": 5 } },
    { "data": { "text": "地图", "priority": 6 } },
    { "data": { "text": "百科", "priority": 7 } },
    { "data": { "text": "更多", "hyperlink": "http://www.baidu.com/more" } }
    ]
    }
    }`)
            this.minder .disable();
            // km.execCommand('hand');
        },
        methods:{
            importData(dataName){
                console.log(dataName)
                this.minder.importData('json', this.dataList[dataName])
            }
        }
    }
</script>
<style lang="less" scoped>
    #minder-editor {
        position: absolute;
        border: 1px solid #ccc;
        width: 800px;
        height: 500px;
        /*left: 10px;*/
        /*top: 10px;*/
        /*bottom: 10px;*/
        /*right: 10px;*/
    }
    /*.active {*/
        /*background: red;*/
        /*outline: none;*/
    /*}*/

    /*.minder-editor-container {*/
        /*.tools {*/
            /*position: fixed;*/
            /*top: 20px;*/
            /*right: 20px;*/
            /*color: red;*/
            /*z-index: 100;*/
            /*display: flex;*/
            /*button, select {*/
                /*margin-left: 8px;*/
            /*}*/
        /*}*/
        /*.tabBar {*/
            /*position: fixed;*/
            /*top: 50%;*/
            /*right: 20px;*/
            /*transform: translate(0, -50%);*/
            /*z-index: 100;*/
            /*display: flex;*/
            /*flex-direction: column;*/
        /*}*/

        /*.tabBar button {*/
            /*margin-bottom: 10px;*/
            /*cursor: pointer;*/
        /*}*/
    /*}*/
</style>
